<template>
  <div>
    <div v-if="key==='/dept/index/list'" class="wBd">
      <el-table :data="deptList" style="width: 100%"
                :default-sort="{prop: 'date', order: 'descending'}"
                tooltip-effect="dark" border stripe
      >
        <el-table-column show-overflow-tooltip prop="deptName" label="社团名称" width="120"></el-table-column>
        <el-table-column show-overflow-tooltip prop="leader" label="负责人" width="100"></el-table-column>
        <el-table-column show-overflow-tooltip prop="phone" label="联系电话" width="120"></el-table-column>
        <el-table-column show-overflow-tooltip prop="email" label="邮箱" width="130"></el-table-column>
        <el-table-column show-overflow-tooltip prop="createTime" sortable label="成立时间" width="100">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="126">
          <template v-slot="scope">
            <el-tooltip effect="dark" content="申请入团" placement="top">
              <el-button @click="updateClick(scope.row)" type="primary" icon="el-icon-edit" size="mini"></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="详情" placement="top">
              <el-button @click="detailClick(scope.row)" type="warning" icon="el-icon-view" size="mini"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <div style="padding-top: 10px"></div>
      <!--分页-->
      <div class="pagination-container">
        <el-pagination
          class="el-pagination"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="deptList.length"
        />
      </div>
    </div>
    <router-view></router-view>

    <div class="sq">
      <el-dialog title="社团申请" :visible.sync="open" width="562px" center>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="用户姓名" prop="name">
                <el-input clearable v-model="form.name" placeholder="请输入姓名"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所在班级" prop="class">
                <el-input clearable v-model="form.class" placeholder="请输入班级"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系方式" prop="phone">
                <el-input :maxlength="11" clearable type="number" v-model="form.phone" placeholder="请输入手机号"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户学号" prop="number">
                <el-input clearable type="number" v-model="form.number" placeholder="请输入学号"/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="申请理由" prop="remark">
                <el-input v-model="form.remark" type="textarea"
                          :maxlength="500" show-word-limit
                          :autosize="{minRows: 5, maxRows: 20}" :style="{width: '98%'}"
                          placeholder="请输入申请理由，方便社团审核"/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <div class="privacy">
                <p>隐私保护说明:</p>
                <p>中原工非常重视用户的隐私，本社联将会措施保护您的个人信息安全，用户个人申请时所提交的信息仅供工作人员核实信息，绝不另作他用。</p>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="submitForm" type="danger" round>提交申请</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
import store from '@/store'
import { changeDept, listUserDept } from '@/api/user'
import { addMessage } from '@/api/message'

export default {
  name: 'List',
  data() {
    return {
      open: false,
      form: {},
      deptById: '',
      // 表单校验
      rules: {
        name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        class: [
          { required: true, message: '班级不能为空', trigger: 'blur' }
        ],
        number: [
          { required: true, message: '学号不能为空', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '申请理由不能为空', trigger: 'blur' }
          ],
        email: [
          {
            type: 'email',
            message: '\'请输入正确的邮箱地址',
            trigger: ['blur', 'change']
          }
        ],
        phone: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur'
          }
        ]
      },
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 5 // 每页的数据条数
    }
  },
  computed: {
    deptList() {
      return JSON.parse(sessionStorage.getItem('deptList'))
    },
    key() {
      return this.$route.path
    },
    ...mapGetters(['avatar', 'name', 'user'])
  },
  created() {
  },
  methods: {
    detailClick(val) {
      sessionStorage.setItem('deptName', val.deptName)
      this.$router.push({
        path: '/dept/index/list/edit',
        query: {
          id: val.deptId
        }
      })
    },
    updateClick(val) {
      if (!getToken()) {
        this.$confirm('您未成功登录，您可以继续留在该页面，或者登录', '系统提示', {
            confirmButtonText: '登录',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          store.dispatch('LogOut').then(() => {
            location.href = '/login'
          })
        }).catch(() => {
        })
      } else {
        if (this.user.deptId) {
          if (this.user.deptStatus == '0') {
            this.msgError('您的账号已经存在社团')
          } else if (this.user.deptStatus == '1') {
            this.msgError('您的账号已有待审核的社团')
          }
          return
        }
        this.form = {}
        this.resetForm('form')
        this.open = true
        this.deptById = val
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          changeDept(JSON.stringify(this.user), 'sq', JSON.stringify(this.deptById.deptId), JSON.stringify(this.deptById)).then(response => {
            if (response.code === 200) {
              this.open = false;
              this.msgSuccess('申请【' + this.deptById.deptName + '】成功，请等待社团审核！')
              let message = {
                fromId: this.user.userId,
                fromName: this.user.userName,
                toId: 1,
                toName: 'admin',
                messageTitle: '社团申请',
                identity:'0',
                type:'0',
                payload: JSON.stringify(this.form),
                messageContent: '【' + this.user.userName + '】用户申请加入【' + this.deptById.deptName + '】社团，请注意查看！'
              }
              addMessage(message)
            }
          })
        }
      })
    },
    /*updateClick(val) {
      console.log(val)
      if (!getToken()) {
        MessageBox.confirm('您未成功登录，您可以继续留在该页面，或者登录', '系统提示', {
            confirmButtonText: '登录',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          store.dispatch('LogOut').then(() => {
            location.href = '/login'
          })
        }).catch(() => {
        })
      } else {
        this.$confirm('是否确认申请加入"' + val.deptName + '"社团?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (this.user.deptId) {
            if (this.user.deptStatus == '0') {
              this.msgError('您的账号已经存在社团')
            } else if (this.user.deptStatus == '1') {
              this.msgError('您的账号已有待审核的社团')
            }
            return
          }
          changeDept(JSON.stringify(this.user), 'sq', JSON.stringify(val.deptId), JSON.stringify(val)).then(response => {
            if (response.code === 200) {
              this.msgSuccess('申请【' + val.deptName + '】成功，请等待社团审核！')
              let message = {
                fromId: this.user.userId,
                fromName: this.user.userName,
                toId: 1,
                toName: 'admin',
                messageTitle: '社团申请',
                messageContent: '【' + this.user.userName + '】用户申请加入【' + val.deptName + '】社团，请注意查看！'
              }
              addMessage(message)
            }
          })
        }).catch(err => {
        })
      }
    },*/

    //分页，每页条数选择
    handleSizeChange(val) {
      this.pageSize = val
    },

    //分页，页数跳转
    handleCurrentChange(val) {
      this.currentPage = val
    }
  }
}
</script>
<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}
</style>

<style scoped>


.privacy {
  margin-left: 14px;
  margin-right: 5px;
  /*margin-top: 16px;*/
}

.privacy p {
  font-size: 14px;
  line-height: 22px;
  color: #8d92a1;
  letter-spacing: 0.6px;
}

.privacy em {
  color: #409eff;
  font-style: normal;
}

.privacy em a {
  color: #409eff;
}

.sq /deep/ .el-input__inner {
  height: 36px;
  line-height: 36px;
  width: 95%;
}

/*.sq /deep/ .el-textarea {
  width: 98%;
}*/

/*.sq /deep/ .el-textarea__inner {
  height: 100px;
  min-height: 100px;
}*/

/deep/ .el-form-item__label {
  font-weight: 700;
}

/deep/ .el-button--danger:focus, /deep/ .el-button--danger:hover {
  background: #fc1944;
  border-color: #fc1944;
  color: #FFF;
}

/deep/ .el-button.is-round {
  border-radius: 20px;
  padding: 12px 40px;
}

/deep/ .el-button--danger {
  border: 1px solid #fc5531;
  color: #FFF;
  background-color: #fc5531;
  /* border-color: #F56C6C; */
}

/deep/ .el-table th > .cell {
  text-align: center;
}

/deep/ .el-table .cell, /deep/ .el-table--border td:first-child .cell, /deep/ .el-table--border th:first-child .cell {
  text-align: center;
  padding: 0;
}

.pagination-container {
  text-align: center;
  background: #fff;
  padding: 35px 0 25px 0;
  color: #333;
}

.pagination-container.hidden {
  display: none;
}

/deep/ .el-pagination__total {
  color: #333;
}

/deep/ .el-input__inner {
  color: #333;
}

/deep/ .el-select .el-input .el-select__caret {
  color: #333;
}

/deep/ .el-pagination__jump {
  color: #333;
}
</style>
